<template>
  <div class="device-info-home device" v-if="visible">
    <div class="device-info-home-title">
      <div class="device-name">{{ data.deviceName }}</div>
      <CloseOutlined @click="close" />
    </div>
    <div class="device-info-home-content">
      <div class="box-sub">设备台账</div>
      <div class="box-info">
        <div class="flex mb-3" v-for="item in deviceInfo" :key="item.name">
          <div class="text-[#4E5969] mr-3">{{ item.name }}:</div>
          <span class="text-[#1D2129]">{{ data[item.field] }}</span>
        </div>
      </div>
      <div class="box-sub">设备缺陷详情</div>
      <table>
        <thead>
          <tr>
            <td>序号</td>
            <td>缺陷部件名称</td>
            <td>缺陷名称</td>
          </tr>
        </thead>
      </table>
      <div class="max-h-[10.25rem] overflow-auto" style="scrollbar-width: 0">
        <table>
          <tbody>
            <template v-if="dataSource.length > 0">
              <tr
                v-for="(item, index) in dataSource"
                :key="index"
                @click="handleClickRow(item)"
              >
                <td>{{ index + 1 }}</td>
                <td>{{ item.partName }}</td>
                <td>{{ item.defectResult }}</td>
              </tr>
            </template>
            <no-data v-else />
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- <DeviceModal ref="deviceModalRef" /> -->
</template>

<script setup>
import { ref } from 'vue'
import { CloseOutlined } from '@ant-design/icons-vue'
// import DeviceModal from './DeviceModal.vue'

const visible = ref(false)

const deviceModalRef = ref()

const deviceInfo = ref([
  {
    name: '设备类型',
    value: '主变压器',
    field: 'deviceType'
  },
  {
    name: '电压等级',
    value: '交流500kV',
    field: 'voltageLevel'
  },
  {
    name: '设备状态',
    value: '在运',
    field: 'deviceStatus'
  },
  {
    name: '巡行编号',
    value: '1号主变',
    field: 'runNum'
  },
  {
    name: '相别',
    value: 'C',
    field: 'phase'
  },
  {
    name: '相数',
    value: '单相',
    field: 'phaseNum'
  },
  {
    name: '生产厂家',
    value: '吴江变压器有限公司',
    field: 'manufacturer'
  },
  {
    name: '型号',
    value: 'ODFS-334000/500',
    field: 'model'
  },
  {
    name: '出厂日期',
    value: '2020-07-01',
    field: 'productDate'
  },
  {
    name: '投运日期',
    value: '2020-10-29',
    field: 'runDate'
  },
  {
    name: '运维单位',
    value: '前江变电运维班',
    field: 'operationGroup'
  }
])

const data = ref()
const dataSource = ref()

const emits = defineEmits(['showVisible', 'changeIndex', 'close'])

const handleClickRow = (record) => deviceModalRef.value.showModal(record)

const showModal = (value) => {
  if (value) {
    visible.value = true
    console.log(value, '弹窗显示，设备信息')
    data.value = value
    dataSource.value = value.deviceDefectVOList
  }
}

const close = () => {
  visible.value = false
  emits('close')
}

defineExpose({ showModal, close })
</script>

<style lang="less" scoped>
.device {
  width: 48.9375rem;
}

.device-info-home {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99;
  background-color: rgb(255 255 255 / 35%);
  border: 0.0625rem solid rgb(255 255 255 / 50%);
  border-radius: 0.5rem;
  backdrop-filter: blur(0.25rem);
  transform: translate(-50%, -50%);

  &-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 0.0625rem solid #e5e6eb;

    svg {
      width: 0.75rem;
      height: 0.75rem;
      color: #b3d6fe;
    }

    .device-name {
      overflow: hidden;
      font-size: 1rem;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
      color: #000;
    }
  }

  &-content {
    padding: 0 1.5rem 1.5rem;

    .box-sub {
      margin: 1rem 0 0.5rem;
      font-size: 0.875rem;
      font-weight: 700;
      color: #000;
    }

    .box-info {
      display: grid;
      padding: 1rem 1rem 0.1875rem;
      background-color: rgb(255 255 255 / 35%);
      border-radius: 0.25rem;
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

table {
  width: 100%;

  tr {
    td {
      padding: 0.5rem 0;
      text-align: center;

      &:first-child {
        width: 10%;
      }

      &:not(:first-child) {
        width: 45%;
      }
    }
  }

  thead {
    tr {
      background-color: rgb(255 255 255 / 35%);

      td {
        color: #4e5969;
      }
    }
  }

  tbody {
    tr {
      border-bottom: 0.0625rem solid rgb(255 255 255 / 35%);

      &:hover {
        cursor: pointer;
        background-color: rgb(255 255 255 / 10%);
      }

      td {
        color: #1d2129;
      }
    }
  }
}
</style>
